<template>
  <div class="">
    <div>
      <headers index = "4"></headers>
    </div>
    <div class="concent">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <!-- 1空运 2海运 3无验收，无开封(海运) 海运CBM(LCL) 6食品EMS -->
          <el-tab-pane v-for="(item,index) in type_list" :label="item.name" :name="item.value"></el-tab-pane>
        </el-tabs>
        <table style="width: 100%;" border = 1>
          <tr>
            <td v-for="(item,index) in pay_info.th">{{item.name}}</td>
          </tr>
          <tr  v-for="(item,index) in pay_info.data">
            <td v-for="(val,key) in pay_info.th">{{item[val.name]?item[val.name]:'-'}}</td>
          </tr>

        </table>
    </div>

  </div>
</template>

<script>
  import {
    freight_index
  } from '@/utils/wqzApi'
  import headers from "@/components/header"
  export default {
      components:{
        headers,
      },
      data() {
        return {
          type:1,
          pay_info:{} , //费用信息
          activeName:'1',
          type_list:[
            {name:this.$t('sea_transportation_cj') , value:'1'},
            {name:this.$t('aviation_cj') , value:'2'},
            {name:this.$t('No_acceptance') , value:'3'},
            {name:this.$t('sea_transportation_cmb') , value:'4'},
            {name:this.$t('food') , value:'5'},
          ]
        }
      },
      mounted() {
       this.freight_index()
      },
      methods:{
        handleClick(tab, event){
          this.type = tab.name
          this.freight_index()
        },
        freight_index(){
          var data = {
            type:this.type
          }
          freight_index(data).then(res=>{
            console.log(res.data)
            this.pay_info = res.data
          })    
        }
      }

  }
</script>

<style lang="scss" scoped >
  .concent{
    width: 100%;
    min-height: 80vh;
    padding: 2vw;
    box-sizing: border-box;
  }
  tr{
    text-align: center;

  }
  td{
    padding: 10px;
  }
</style>
